import React from "react";
import { Button } from 'antd';

import './index.css';
import ItemBankYellowInfo from "../../../../Common/svg/ItemBankYellowInfo";
import ItemBankBlueQuestion from "../../../../Common/svg/ItemBankBlueQuestion";
import Blank from "../../../../Component/Blank";
import RedStar from "../../../../Component/RedStar";
import QuestionServer from "../../../../Server/Study/QuestionServer";

export default class  extends React.Component{
    
    constructor(props){
        super();
        let id=props.match.params.id;
        let number=props.match.params.number;
        let prevNumber=Number(number)-1;
        let nextNumber=Number(number)+1;
        this.state={
            number,
            id,
            prevNumber,
            nextNumber,
            questionTitle:"",
            answerTitle:"",
            answerDesc:"",
            totalCount:0
        };
        this.GetData(id,number);
        QuestionServer.SelectQuestioncount(id)
        .then(response=>{
            this.setState({
                totalCount:Number(response.data)
            });
        })
    }
    GetData(id,number){
        let prevNumber=Number(number)-1;
        let nextNumber=Number(number)+1;

        QuestionServer.SelectQuestionChapterNumberDetails(1,id,number)
        .then(response=>{
            // console.log(response)
            this.setState({
                prevNumber,
                nextNumber,
                questionTitle:response.data.QuestionNumber.questionTitle,
                answerTitle:response.data.aopaQuestionGuideAnswer.answerSketch,
                answerDesc:response.data.aopaQuestionGuideAnswer.answerDetails
            })
        });
    }
    Prev(){
        let url=`/itemBankMsgDeatil/${this.state.id}/${this.state.prevNumber}`;
        
        if(this.state.prevNumber<=0){
            return;
        }
        this.setState({
            number:this.state.prevNumber
        },()=>{
            this.GetData(this.state.id,this.state.number);
        });
        this.props.history.push({pathname:url});
    }
    Next(){
        let url=`/itemBankMsgDeatil/${this.state.id}/${this.state.nextNumber}`;
        if(this.state.nextNumber>this.state.totalCount){
            return;
        }
        this.setState({
            number:this.state.nextNumber
        },()=>{
            this.GetData(this.state.id,this.state.number);
        });
        this.props.history.push({pathname:url});
    }
    render(){
        return(
            <div>
                <div className="flexContainer ItemBank_MsgDetail_Link">
                    <span>口试指南>口试题库详情</span>
                    <Blank/>
                    <span><RedStar/><span className="ItemBank_MsgDetail_Chatper">控制站部分（同时含遥控器及链路）</span></span>
                </div>
                <div className="ItemBank_MsgDetail_Info">
                    <div>
                        <div className="ItemBank_MsgDetail_Left">
                            <ItemBankBlueQuestion/>
                        </div>
                        <div className="ItemBank_MsgDetail_Right ">
                            <div className="ItemBank_MsgDetail_Title">{this.state.questionTitle}</div>
                        </div>
                    </div>
                    <div className="ItemBank_MsgDetail_Example">
                        <div className="ItemBank_MsgDetail_Left">
                            <ItemBankYellowInfo/>
                        </div>
                        <div className="ItemBank_MsgDetail_Right">
                            <p className="ItemBank_MsgDetail_ExampleTitle">{this.state.answerTitle}</p>
                            <p className="ItemBank_MsgDetail_ExampleDetail">{this.state.answerDesc}</p>
                        </div>
                    </div>
                    <div className="ItemBankDetail_BtnContainer">
                        <span>
                            <Button type="default" shape="round" size="large" onClick={e=>this.Prev(e)}>
                                <span className="ItemBankDetail_BtnText">上一题</span>
                            </Button>
                        </span>
                        <span className="ItemBankDetail_BtnRight">
                            <Button type="primary" shape="round" size="large" onClick={e=>this.Next(e)}>
                                <span className="ItemBankDetail_BtnText">下一题</span>
                            </Button>
                        </span>
                    </div>
                </div>
            </div>
            
            
        )
    }
}